<template>
    <div class="invitation-page">
        <back title="邀请有礼">
            <span class="invitation-record" @click="$router.push('/invitation-record')">邀请记录</span>
        </back>
        <div class="invitation-content">
            <div class="invitation-top">
                <div class="title">累计获取奖金</div>
                <div class="invitation-money">${{Invite.amount || '0.00'}}</div>
            </div>
            <div class="invitation-step">
                <div class="step-item">
                    <span class="img share"></span>
                    <p>分享链接给好友</p>
                </div>
                <i class="iconfont icon-you-"></i>
                <div class="step-item">
                    <span class="img renzheng"></span>
                    <p>好友完成认证</p>
                </div>
                <i class="iconfont icon-you-"></i>
                <div class="step-item">
                    <span class="img jiangli"></span>
                    <p>我获得奖励金</p>
                </div>
            </div>
            <div class="inviteCode">
                <div class="codeimg">
                    <canvas ref="qrcodeios" style="display: block;"></canvas>
                </div>
                <div class="code">邀请码:<span>{{Invite.inviteCode}}</span></div>
            </div>
            <div class="send-share">
                <button type="button" id="copycode" @click="shareCode" :data-clipboard-text="copyValue">复制邀请码</button>
                <button id="btn" type="button" @click="shareUrl" :data-clipboard-text="copyValue">发送我的专属链接</button>
            </div>
            <div class="rule-list">
                <div class="rule-title">活动规则：</div>
                <p>1.每分享一个用户并成功注册，将获得一张20元的抵用卷</p>
                <p>2.可以获取下面3级的交易手续费的10%，5%，10%</p>
            </div>  
        </div>
    </div>
</template>

<style lang="stylus">
.invitation-page{
    padding-top 50px
    overflow-y auto
    .invitation-record{
        position absolute
        top 0px
        right 10px
        font-size 14px
    }
    .invitation-content{
        .invitation-top{
            background-image: linear-gradient(to top , #3b79e7, #3563db);
            text-align center
            color #ffffff
            padding 30px 0
            .title{
                font-size 14px
                margin-bottom 15px
            }
            .invitation-money{
                font-size 24px
                color #ffc600
            }
        }
        .invitation-step{
            display flex
            padding 50px 0 0
            align-items center
            .iconfont{
                font-size 14px
            }
            .step-item{
                width 33.3%
                text-align center
                font-size 12px
                .img{
                    display block
                    width 60px
                    height 60px
                    margin 0 auto 
                    background-repeat no-repeat
                    background-size 100%
                    background-position center
                    &.share{
                        background-image url(../../assets/image/fenxiang.png)
                    }
                    &.renzheng{
                        background-image url(../../assets/image/wangcheng.png)
                    }
                    &.jiangli{
                        background-image url(../../assets/image/jiangli.png)
                    }
                }
                p{
                    margin-top 10px
                }
            }
        }
        .send-share{
            text-align center
            button{
                width 80%
                height  40px
                color #fff
                background-image: linear-gradient(to top, #322be9, #5677fd)
                border 0
                border-radius 50px
                font-size 18px
                outline none
                margin-bottom 15px
            }
        }
        .inviteCode{
            font-size 18px
            text-align center
            padding:30px 0
            .codeimg{
                display inline-block
                border 1px solid #eee
                padding 5px
                margin-bottom 10px
            }
            .code{
                display flex
                align-items center
                justify-content center 
                span{
                    color red
                }
                .copycode{
                    font-size 16px
                    background linear-gradient(to bottom, #322be9, #5677fd)
                    color #fff
                    border 0
                    outline none 
                    border-radius 5px
                    height 35px
                    width 100px
                }
            }
            
        }
        .rule-list{
            padding 10px
            .rule-title{    
                font-size 18px
                color #333
                margin-bottom 10px
            }
            p{
                font-size 16px
                color #888
                line-height 20px
            }
        }
    }
}
</style>

<script>
import QRious from 'qrious'
import Clipboard from 'clipboard';
export default {
    data(){
        return {
            Invite:'',
            copyValue:''
        }
    },
    created(){
        this.getMyInviteCode();
    },
    mounted(){
        this.initcode()
    },
    methods:{
        initcode() {
            new QRious({
                element: this.$refs.qrcodeios,
                size: 150,
                value: `${window.location.origin}/login?inviteCode=${this.Invite.inviteCode}`
            });
        },
        getMyInviteCode(){
            this.$http.get(`/Invite/getMyInviteCode`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.Invite = res.data;
                }
            })
        },
        shareUrl(){
            let btnCopy = new Clipboard('#btn');
            this.copyValue = `${window.location.origin}/login?inviteCode=${this.Invite.inviteCode}`;
            let toast = this.$createToast({
                time: 1500,
                txt: '链接已添加到剪切板',
                type:'correct'
            })
            toast.show()
        },
        shareCode(){
            let btnCopy = new Clipboard('#copycode');
            this.copyValue = `${this.Invite.inviteCode}`;
            let toast = this.$createToast({
                time: 1500,
                txt: '邀请码已添加到剪切板',
                type:'correct'
            })
            toast.show()
        }
    }
}
</script>
